<template>
  <div class="main">
    <div class="bg">
      <img v-lazy="publicUrl(`/images/register-bg.jpg`)" />
      <div class="bg-content">
        <div class="logo"><img v-lazy="publicUrl(`/images/logo.png`)" /></div>
        <div class="title-part">
          <div class="title-top">买家账户注册</div>
          <div class="title-bottom">
            入驻成为云裁的客户，让我们一起共同成长，共创未来！
          </div>
        </div>
      </div>
    </div>

    <div class="column">
      <div class="store-apply thumb" @click="()=>activitName = 1">
        门店企业入驻申请
        <div class="bottom" v-show="activitName === 1"></div>
      </div>
      <div class="store-apply thumb" @click="()=>activitName = 2">
        量体师入驻申请
        <div class="bottom" v-show="activitName === 2"></div>
      </div>
    </div>

    <div class="form-card">
      <Store v-if="activitName === 1" @showDialog="showDialog" />
      <Man v-else-if="activitName === 2" @showDialog="showDialog" />
    </div>
    <Dialog width="60vw" v-model:visible="visible.open" :title="visible.title">
      <!-- <div v-html="visible.html" class="visibleHtml"></div> -->
      <div class="dialogHtml">
        <pre class="visibleHtml">{{ visible.html }}</pre>
      </div>
    </Dialog>
  </div>
</template>
<script setup lang="ts" name="">
import { ref, reactive } from "vue";
import { publicUrl } from "@/utils/util";
import Store from "./components/Store/index.vue";
import Man from "./components/Man/index.vue";
import Dialog from "@/components/Dialog/index.vue";

const activitName = ref<1 | 2>(1);
const visible = reactive<{
  title: string;
  html: string;
  open: boolean;
}>({
  title: "",
  html: "",
  open: false,
});

const showDialog = (open: { title: string }) => {
  visible.title = open.title;
  visible.html = `【审慎阅读】您在申请注册流程中点击同意前，应当认真阅读以下协议，请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：
     
     1、与您约定免除或限制责任的条款;

     2、与您约定法律适用和管辖的条款;

     3、其他以粗体下划线标识的重要条款;

如您对协议有任何疑问，可向云裁服务中心(请点击)咨询
【特别提示】您已充分理解，云裁中台是一个服装采购平台，当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容，并将基于您的真实贸易需求而使用云裁服务，如您因云裁服务与云裁发生争议，应适用《云裁服务条款》处理；如您在使用云裁服务中与其他用户发生争议，依您与其他用户达成的协议处理。
     
阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。

《云裁服务条款》 【审慎阅读】您在申请注册流程中点击同意前，应当认真阅读以下协议，请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：
     
     1、与您约定免除或限制责任的条款;

     2、与您约定法律适用和管辖的条款;

     3、其他以粗体下划线标识的重要条款;

如您对协议有任何疑问，可向云裁服务中心(请点击)咨询
【特别提示】您已充分理解，云裁中台是一个服装采购平台，当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容，并将基于您的真实贸易需求而使用云裁服务，如您因云裁服务与云裁发生争议，应适用《云裁服务条款》处理；如您在使用云裁服务中与其他用户发生争议，依您与其他用户达成的协议处理。
     
阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。

《云裁服务条款》 【审慎阅读】您在申请注册流程中点击同意前，应当认真阅读以下协议，请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：
     
     1、与您约定免除或限制责任的条款;

     2、与您约定法律适用和管辖的条款;

     3、其他以粗体下划线标识的重要条款;

如您对协议有任何疑问，可向云裁服务中心(请点击)咨询
【特别提示】您已充分理解，云裁中台是一个服装采购平台，当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容，并将基于您的真实贸易需求而使用云裁服务，如您因云裁服务与云裁发生争议，应适用《云裁服务条款》处理；如您在使用云裁服务中与其他用户发生争议，依您与其他用户达成的协议处理。
     
阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。

《云裁服务条款》 【审慎阅读】您在申请注册流程中点击同意前，应当认真阅读以下协议，请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：
     
     1、与您约定免除或限制责任的条款;

     2、与您约定法律适用和管辖的条款;

     3、其他以粗体下划线标识的重要条款;

如您对协议有任何疑问，可向云裁服务中心(请点击)咨询
【特别提示】您已充分理解，云裁中台是一个服装采购平台，当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容，并将基于您的真实贸易需求而使用云裁服务，如您因云裁服务与云裁发生争议，应适用《云裁服务条款》处理；如您在使用云裁服务中与其他用户发生争议，依您与其他用户达成的协议处理。
     
阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。

《云裁服务条款》 【审慎阅读】您在申请注册流程中点击同意前，应当认真阅读以下协议，请您务必审慎阅读、充分理解协议中相关条款内容，其中包括：
     
     1、与您约定免除或限制责任的条款;

     2、与您约定法律适用和管辖的条款;

     3、其他以粗体下划线标识的重要条款;

如您对协议有任何疑问，可向云裁服务中心(请点击)咨询
【特别提示】您已充分理解，云裁中台是一个服装采购平台，当您按照注册页面提示填写信息、阅读并同意协议且完成全部注册程序后，即表示您已充分阅读、理解并接受协议的全部内容，并将基于您的真实贸易需求而使用云裁服务，如您因云裁服务与云裁发生争议，应适用《云裁服务条款》处理；如您在使用云裁服务中与其他用户发生争议，依您与其他用户达成的协议处理。
     
阅读协议的过程中，如果您不同意相关协议或其中任何条款约定，您应立即停止注册程序。

《云裁服务条款》 `;

  visible.open = true;
};
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}
</style>
